<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		/* ****** CSS样式 ****** */
		span{
			border: 2px solid green;
			font-size: 30px;
			font-weight: bold;
		}
		.s1 {
			background-color: #0000FF;
		}
		
	</style>
	<!-- 通过link标签引入样式，真正实现了html代码和css进行分离 -->
	<link rel="stylesheet" type="text/css" href="demo.css"/>
</head>
<body>
	<!-- 
		1.通过标签上的style属性给div设置样式 
		边框:2px solid red 
		字体大小:26px
		背景颜色为:pink
	-->
	<!-- 2.通过style标签给span设置样式如下： 
		边框: 2px solid green
		字体大小: 30px
		字体加粗
	-->
	<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下： 
		边框: 2px solid blue;
		字体颜色:red
		字体设置为华文琥珀
		设置首行文本缩进50px
	-->
	<div style="border:2px solid #FF0000;font-size:26px;background: pink;text-align: center;">
		这是一个div...
	</div>

	<br/>
	
	<span class="s1">span111</span>
	<span>span222</span>
	<span>span333</span>

	<p>这是一个p标签1</p>
	<p>这是一个p标签p2</p>
	<p>这是一个p标签p3</p>
	
</body>
</html>
